// 该文件是把 Vue 路由相关代码进行抽离，方便后期维护。

// 💥注意：NodeJS 环境规定，每个 JS 文件都是独立模块，都有自己的作用域。

// 1. 导入 Vue 路由模块
import VueRouter from 'vue-router'
// 因为要用到 Vue.use() 方法，所以需要导入 Vue
import Vue from 'vue'
// 2. 全局注册路由模块，就可以在任意 .vue 文件调用 <router-link> 和 <router-vie> 组件
Vue.use(VueRouter)
// 3. 配置路径与组件的映射规则
import Layout from '../views/Layout/index.vue'
import Home from '../views/Home/index.vue'
import Search from '../views/Search/index.vue'
import Play from '../views/Play/index.vue'

const routes = [
  { path: '/', redirect: '/layout' },
  {
    // layout 有公共的头部和底部 tabBar
    path: '/layout',
    component: Layout,
    // 重定向，默认打开首页
    redirect: '/layout/home',
    // home 和 search 是作为二级路由
    children: [
      { path: 'home', component: Home, meta: { title: '首页' } },
      { path: 'search', component: Search, meta: { title: '搜索' } },
    ],
  },
  { path: '/play', component: Play },
]
// 4. new 一个路由实例 - 需配置映射规则
const router = new VueRouter({
  routes: routes,
})
// 5. 导出路由对象 - 因为需要在 main.js 使用
export default router
